<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import { $t } from '@/locales';
import { UserApi } from '@/api-services/apis/user-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { REG_PWD, REG_USER_NAME } from '@/constants/reg';
import { ApiroleserviceApi } from '@/api-services/apis/apiroleservice-api';
import { NetoKit } from '@/typings/neto';
import { ApiSysEmailSendRecordOut, SysemailsendrecordApi } from '@/api-services';
import { ElTooltip } from 'element-plus';

defineOptions({
  name: 'EmailRecordOperateModal'
});

interface Props {
  /** the edit row data */
  editId?: number | undefined;
}

const props = defineProps<Props>();



const visible = defineModel<boolean>('visible', {
  default: false
});



// const regs: Record<UI.TableOperateType, App.Global.FormRule> = {
//   edit: { required: false },
//   add: {
//     required: true,
//     pattern: REG_PWD,
//     message: $t('form.pwd.invalid'),
//     trigger: 'change'
//   }
// };

// type Model = NonNullable<Pick<
//   ApiUserOut,
//   'account' | 'nick' | 'phone' | 'email' | 'isEnable'
// >>;
type Model = NetoKit.NullToUndefined<{
  [K in keyof Pick<ApiSysEmailSendRecordOut,
    'id' | 'templateType' | 'subject' | 'senderName' | 'senderEmail' | 'receiveName' | 'receiveEmail' |
    'state' | 'pars' | 'content' | 'sendResult' | 'isVerCode' | 'verCode' | 'isUse' | 'creationTime'>]: ApiSysEmailSendRecordOut[K];
}> & { expireTime: Date | undefined; }
const model = ref(createDefaultModel());
// string转换为number
// model.value.roleIds = model.value.roleIdStr?.split(',').map(Number);
function createDefaultModel(): Model {
  return {
    id: 0,
    templateType: 0,
    subject: '',
    content: '',
    senderName: '',
    senderEmail: '',
    receiveName: '',
    receiveEmail: '',
    state: 0,
    isVerCode: false,
    verCode: '',
    isUse: false,
    pars: '',
    sendResult: '',
    expireTime: undefined
  };
}



async function handleInitModel() {
  if (props.editId) {

    const [err, res] = await feature(getAPI(SysemailsendrecordApi).get(props.editId));
    queryDone(err, () => {
      if (res?.data.data) {
        // if (!res.data.data.content) {
        //   res.data.data.content = '';
        // }
        Object.assign(model.value, res?.data.data);
      }
    })
  }
}


watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    // getRoleOptions();
  }
});
const isFullScreen = ref(false);

const title = computed(() => {
  //邮件详情 - 发送状态 - 模板类型(如果模板类型不为0则显示模板名称)
  const titleList = [$t('page.emailManage.emailSendRecord.detail')];

  // let sendState = '';
  // switch (model.value.state) {
  //   case 0:
  //     sendState = $t('page.emailManage.emailSendRecord.stateEnum.notSent');
  //     break;
  //   case 1:
  //     sendState = $t('page.emailManage.emailSendRecord.stateEnum.hasBeenSent');
  //     break;
  //   case 2:
  //     sendState = $t('page.emailManage.emailSendRecord.stateEnum.failSent');
  //     break;
  // }

  // titleList.push(`${$t('page.emailManage.emailSendRecord.state')}:${sendState}`);
  // if (model.value.templateType != 0) {
  //   let templateType = '';
  //   switch (model.value.templateType) {
  //     case 1001: templateType = $t('page.emailManage.emailSendRecord.form.templateTypeEnum.register'); break;
  //     case 1002: templateType = $t('page.emailManage.emailSendRecord.form.templateTypeEnum.updatePwd'); break;
  //     case 1003: templateType = $t('page.emailManage.emailSendRecord.form.templateTypeEnum.updateEmail'); break;
  //     case 1004: templateType = $t('page.emailManage.emailSendRecord.form.templateTypeEnum.resetPwd'); break;
  //   }
  //   titleList.push(`${$t('page.emailManage.emailSendRecord.templateType')}:${templateType}`)
  // }

  return titleList.join(' - ')
})
</script>

<template>
  <NModal v-model:open="visible" :title="title" modal-height="50vh" width="800px" :show-footer="false"
    v-on:handle-full-screen-change="($event) => { isFullScreen = $event }" :show-full-screen="true">
    <ElRow :gutter="16">
      <!-- 发件人信息 -->
      <ElCol :span="24" class="email-sender-header">
        <div style="flex: 1">
          <ElSpace direction="vertical" :size="4">
            <p :style="{ color: '#5fa207', fontSize: '14px', fontWeight: 700 }">
              {{ $t('page.emailManage.emailSendRecord.senderName') }}: {{ model.senderName }}
            </p>
            <p :style="{ color: '#a0a0a0', fontSize: '12px', fontWeight: 400 }">
              {{ model.senderEmail }}
            </p>
          </ElSpace>
        </div>
        <ElSpace>
          <!-- 发送状态 -->
          <ElTooltip v-if="model.state == 0" placement="left">
            <template #content>
              {{ $t('page.emailManage.emailSendRecord.stateEnum.notSent') }}
            </template>
            <div>

              <SvgIcon icon="material-symbols:schedule-send" style="color: #3737ad;"></SvgIcon>
            </div>
          </ElTooltip>
          <ElTooltip v-if="model.state == 1" placement="left">
            <template #content>
              {{ $t('page.emailManage.emailSendRecord.stateEnum.hasBeenSent') }}
            </template>
            <div>

              <SvgIcon icon="material-symbols:send" style="color: #5fa500;"></SvgIcon>
            </div>
          </ElTooltip>
          <ElTooltip v-if="model.state == 2" placement="left">
            <template #content>
              {{ $t('page.emailManage.emailSendRecord.stateEnum.failSent') }}
            </template>
            <div>

              <SvgIcon icon="material-symbols:cancel-schedule-send" style="color: #f73030;">
              </SvgIcon>
            </div>
          </ElTooltip>



          <!-- 是否验证码 -->
          <ElTooltip v-if="model.isVerCode === true" placement="left">
            <template #content>{{ $t('page.emailManage.emailSendRecord.verCode') }}</template>
            <div>
              <SvgIcon icon="ant-design:verified-outlined" style="color: #5fa500;"></SvgIcon>
            </div>
          </ElTooltip>

          <!-- 是否使用 -->
          <ElTooltip v-if="model.isUse === true" placement="left">
            <template #content>{{ $t('page.emailManage.emailSendRecord.isUsed') }}</template>
            <div>
              <SvgIcon icon="ix:success" style="color: #5fa500;"></SvgIcon>
            </div>
          </ElTooltip>




        </ElSpace>
      </ElCol>

      <!-- 邮件卡片 -->
      <ElCol :span="24">
        <ElCard class="email-card">
          <!-- 卡片头部 -->
          <div class="card-header">
            <div style="flex: 1">
              <ElSpace direction="vertical" :size="8">
                <!-- 标题 -->
                <p :level="4" style="margin: 0; color: #333">
                  {{ model.subject }}
                </p>

                <!-- 收件人信息 -->
                <ElSpace>
                  <p type="secondary">{{ $t('page.emailManage.emailSendRecord.receiveName')
                  }}:</p>
                  <p strong>{{ model.receiveName }}</p>
                  <p type="secondary">
                    <{{ model.receiveEmail }}>
                  </p>
                </ElSpace>
              </ElSpace>
            </div>

            <!-- 时间 -->
            <p type="secondary">
              {{ model.creationTime }}
            </p>
          </div>

          <!-- 内容区域 -->
          <ElDivider style="margin: 16px 0" />
          <div :class="`email-content ${isFullScreen ? '' : 'email-content-not-full'}`" v-html="model.content" />
        </ElCard>
      </ElCol>
    </ElRow>
  </NModal>
</template>

<style scoped>
.email-sender-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.email-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  /* 新增宽度设置 */
}

.email-content {
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
  /* 新增最小高度 */
  width: 100%;
  /* 确保宽度铺满 */
}

.email-content-not-full {

  min-height: calc(100vh - 710px);
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    gap: 12px;
  }

  .email-content {
    min-height: 50vh;
    /* 移动端调整高度 */
  }
}

/* 发件人信息强制换行 */
.ant-space-vertical {
  width: 100%;
}
</style>
